<template>
  <span class="wrapper">
    <div class="titleWrapper">
      <p class="title">{{ topDesObj[currentTab]['title'] }}</p>
      <p class="description">{{ topDesObj[currentTab]['title'] }}总数量：{{ total }}</p>
    </div>
    <span class="filterWrapper">
      <span style="color:#000">全部分类</span>
      <el-cascader
        :options="options"
        ref="cascader"
        @visible-change="visibleChange"
        style="margin-left:24px;width:300px;"
        v-model="checkedV"
        :props="props"
        clearable
        @change="cascaderChange"
      ></el-cascader>
    </span>
  </span>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
  data() {
    const thiz = this
    return {
      options: [],
      filterId: {},
      checkedV: '',
      props: {
        lazy: true,
        checkStrictly: true,
        expandTrigger: 'hover',
        async lazyLoad(node, resolve) {
          const { value, level } = node
          if (level === 2) {
            resolve()
            return
          }
          const data = await thiz.$store.dispatch('home/getFilters', {
            parentId: value
          })
          resolve(data)
        }
      },
      topDesObj: {
        1: {
          title: '工业APP',
          des: '工业应用说明'
        },
        2: {
          title: '工业微服务',
          des: '微服务说明'
        },
        3: {
          title: '工业机理模型',
          des: '工业机理模型管理'
        }
      }
    }
  },
  methods: {
    ...mapActions({
      getList: 'home/getList'
    }),
    handleFilter(id) {
      this.$store.commit('home/setTypeId', id)
      this.getList()
    },
    resetAndQuery() {
      this.$store.commit('home/setFilterId', {})
      this.getList()
    },
    visibleChange(visible) {
      if (visible === false) {
        this.$store.commit('home/setFilterId', this.filterId)
        this.getList()
      }
    },
    cascaderChange(v, a) {
      if (v.length === 0) {
        this.resetAndQuery()
        return
      }
      if (v.length === 1) {
        if (this.currentTab === '1' || this.currentTab === '3') {
          this.filterId = {
            typeIds: this.$refs.cascader.getCheckedNodes()[0].data.id
          }
        } else {
          this.filterId = { parentId: v[0] }
        }
      } else {
        this.filterId = { typeIds: v[1] }
      }
    }
  },
  watch: {
    '$store.state.home.currentTab': {
      handler(v) {
        this.filterId = {}
        this.checkedV = ''
        this.options = []
      }
    }
  },
  created() {
    this.resetAndQuery()
  },
  computed: {
    ...mapState({
      total: (state) => state.home.total,
      currentTab: (state) => state.home.currentTab || '1',
      filterData: (state) => state.home.filterData,
      typeId: (state) => state.home.typeId
    })
  }
}
</script>
<style lang="scss" scoped>
@mixin center {
  display: flex;
  align-items: center;
}
.wrapper {
  .filterWrapper {
    margin-left: 24px;
    display: flex;
    align-items: center;
  }
  .titleWrapper {
    margin-top: 40px;
    @include center;
    flex-direction: column;
    justify-content: center;
    height: 104px;
    .title {
      color: #333;
      font-size: 30px;
      line-height: 30px;
      margin: 0;
    }
    .description {
      line-height: 18px;
      font-size: 18px;
      color: #6f7c82;
    }
  }
}
/deep/ .el-button {
  border-radius: 20px;
  margin: 0 10px;
}
</style>
